<template>
  <sui-sidebar
    :visible="sidebar.open"
    direction="left"
    animation="overlay"
    class="layout-sider"
    style="position: fixed;"
  >
    <ZuiCard style="cursor:pointer"></ZuiCard>
    <sui-tab
      id="side-menu"
      :menu="{ borderless: true, attached: 'bottom', tabular: false }"
    >
      <sui-tab-pane
        title=""
        icon="address book"
        attached="top"
      >
        <sui-list relaxed>
          <sui-list-item @click="shift('/personal')">
            <sui-list-icon
              name="address card"
              size="large"
              vertical-align="middle"
            />
            <sui-list-content>
              <a
                is="sui-list-description"
                style="padding-top:2px"
              >个人资料</a>
            </sui-list-content>
          </sui-list-item>
          <sui-list-item>
            <sui-list-icon
              name="book"
              size="large"
              vertical-align="middle"
            />
            <sui-list-content>
              <a
                is="sui-list-description"
                style="padding-top:2px"
              >地址管理</a>
            </sui-list-content>
          </sui-list-item>
          <sui-list-item>
            <sui-list-icon
              name="envelope"
              size="large"
              vertical-align="middle"
            />
            <sui-list-content>
              <a
                is="sui-list-description"
                style="padding-top:2px"
              >消息管理</a>
            </sui-list-content>
          </sui-list-item>
        </sui-list>
        <div class="ui divider"></div>
        <sui-list
          relaxed
          style="text-align: left;padding-left:18px"
        >
          <sui-list-item>
            <sui-list-content>
              <a is="sui-list-description">问题反馈</a>
            </sui-list-content>
          </sui-list-item>
          <sui-list-item>
            <sui-list-content>
              <a is="sui-list-description">帮助中心</a>
            </sui-list-content>
          </sui-list-item>
        </sui-list>
      </sui-tab-pane>
      <sui-tab-pane
        title=""
        icon="user secret"
        attached="top"
      >
        <sui-list
          relaxed
          style="text-align: left;padding-left:18px"
        >
          <sui-list-item>
            <sui-list-content>
              <a is="sui-list-description">创建新账号</a>
            </sui-list-content>
          </sui-list-item>
          <sui-list-item>
            <sui-list-content>
              <a is="sui-list-description">切换已有账号</a>
            </sui-list-content>
          </sui-list-item>
        </sui-list>
      </sui-tab-pane>
    </sui-tab>
  </sui-sidebar>
</template>
<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
import ZuiCard from "./ZuiCard.vue";
export default {
  name: "zui-sidebar",
  components: {
    ZuiCard
  },
  data() {
    return {
      baseUrl: process.env.BASE_URL,
      img: require("../assets/images/elliot.jpg")
    };
  },
  computed: {
    ...mapGetters(["sidebar", "authentication"])
  },
  mounted() {},
  methods: {
    ...mapActions(["toggleSidebar", "handleSidebar"]),
    siderShift(url) {
      this.$router.push(url);
      this.handleSidebar(false);
    }
  }
};
</script>
<style lang="less" scoped>
@tablet: 992px;
@mobile: 768px;
.ui.left.overlay.sidebar {
  &.visible /deep/ {
    box-shadow: 5px 1px 10px 0 rgba(0, 0, 0, 0.25);
  }
}
.layout-sider {
  transition: all 0.2s;
  position: relative;
  background-color: darkseagreen;
  min-width: 0;
  @media (min-width: @tablet) {
    flex: 0 0 256px;
    max-width: 256px;
    min-width: 256px;
    width: 256px;
  }
}
#side-menu {
  margin: 0;
  width: 100%;
  & /deep/ .ui.tab.segment.attached {
    margin: 0;
    width: 100%;
    border: 0;
    font-size: 15px;
    font-weight: 400 !important;
    padding: 15px 0;
  }
  & /deep/ .ui.bottom.attached.borderless.menu {
    display: flex;
    justify-content: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    top: auto;
    bottom: 0;
    position: fixed;
    box-shadow: none;
    border: 0;
    & /deep/ .item {
      margin: 0;
      flex-grow: 1;
      position: relative;
      padding: 1.55em 2em;
      & /deep/ .icon {
        font-size: 15px;
        float: none;
      }
    }
  }
}
.ui.vertical.menu .item {
  & /deep/ i.icon {
    float: left;
  }
}
</style>
